<script lang="ts" setup>
import { defineAsyncComponent, computed } from 'vue'
import { bikeModifieldsDetailOrderTableCol } from '@/api/user/types/user'
import { useRouter } from 'vue-router'
import { BikeModifieldsOrderStatusCodeType } from '@/types/enum'

defineProps<{
  data: bikeModifieldsDetailOrderTableCol[]
  loading: boolean
}>()
const router = useRouter()
/**
 * 查看所属门店 弹出框
 */
const StoreInfo = defineAsyncComponent(() => import('@/components/popover/StoreInfo.vue'))
const operatorsInfo = (row: bikeModifieldsDetailOrderTableCol) => {
  router.push({
    name: 'OperatorsInfo',
    query: {
      merchantId: row.storeInfo.merchantId,
      storeId: row.storeInfo.storeId
    }
  })
}
const orderStatusCodeColor = (orderStatusCode: BikeModifieldsOrderStatusCodeType) => {
  const color = {
    '-1': 'var(--xy-danger-color)',
    '0': 'var(--xy-warning-color)',
    '1': 'var(--xy-grey-text-color)',
    '12': 'var(--xy-primary-light-color)'
  }
  return {
    color: color[orderStatusCode]
  }
}
const changeOrderStatusCode = computed(() => {
  return (orderStatusCode: BikeModifieldsOrderStatusCodeType) => {
    switch (orderStatusCode) {
      case '-1':
        return '待支付'
      case '0':
        return '待安装'
      case '1':
        return '已安装'
      case '12':
        return '已退单'

      default:
        break
    }
  }
})
</script>

<template>
  <el-table :data="data" class="no-border" v-loading="loading">
    <el-table-column prop="mobilePhone" label="手机号" min-width="150" align="center" />
    <el-table-column prop="userName" label="姓名" align="center" />
    <el-table-column prop="shortName" label="商品" min-width="150" align="center" />
    <el-table-column prop="orderAmount" label="售价" align="center" />
    <el-table-column prop="payTime" label="下单时间" min-width="200" align="center" />
    <el-table-column prop="payment" label="支付方式" align="center" />
    <el-table-column prop="orderStatusCode" label="订单状态" align="center">
      <template #default="scope">
        <span :style="orderStatusCodeColor(scope.row.orderStatusCode)">{{
          changeOrderStatusCode(scope.row.orderStatusCode)
        }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="lockId" label="产品编号" align="center" />
    <el-table-column prop="changedTime" label="已完成/取消时间" min-width="200" align="center" />
    <el-table-column label="所属门店" align="center">
      <template #default="scope">
        <el-popover
          v-if="scope.row.storeInfo"
          trigger="hover"
          popper-class="store-info_popover"
          width="210px"
        >
          <store-info :data="scope.row.storeInfo" :is-divider="true">
            <template #button>
              <el-button plain link w-full @click="operatorsInfo(scope.row)">进入门店 ></el-button>
            </template>
          </store-info>
          <template #reference>
            <el-button link type="primary" class="is-open">查看</el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="" label="退款进度"></el-table-column>
    <el-table-column prop="" label="中控操作记录"></el-table-column> -->
  </el-table>
</template>

<style scoped></style>
